<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 分辨率范围：1200~2000 -->
		<style type="text/css">
			/* resetcss开始 */
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			#wrap{height: 100%;}
			/* resetcss结束 */
			
			/* comment css 开始 */
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			.commonTitle{color: #009ee0; font-size: 80px; line-height: 0.8;
			font-weight: bold;letter-spacing: -5px;}
			.commonText{ color:white; line-height:1.5; font-size:15px;}
			/* comment css结束 */
			
			/* 头部样式开始 */
			#head{
				background: white!important;
				width: 100%;
			}
			#head .headMain{
				position: relative;
				width: 1100px;
				height: 80px;
				margin: 0 auto;
			}
			#head .headMain > .logo{
				float: left;
				margin-top: 30px;
			}
			#head .headMain > .nav{
				float: right;
				margin-top: 50px;
			}
			#head .headMain > .nav > .list li{
				float: left;
				margin-left: 40px;
				position: relative;
			}
			#head .headMain > .nav > .list .up{
				color: black;
				position: absolute;
				/* 宽度为0了，内容同样也会显示，应该还要设置overflow:hidden */
				width: 0;
				overflow: hidden;
				transition: width 1s;
			}
			#head .headMain > .nav > .list li:hover .up{
				width: 100%;
			}
			#head .headMain > .arrow{
				position: absolute;
				left: 50%;
				bottom: -11px;
				width: 21px;
				height: 11px;
				background: url(img/menuIndicator.png);
				transition: left 1s;
				z-index: 2;
			}
			/* 头部样式结束 */
			
			/* 内容区样式开始 */
			#content{
				background: gray;
				position: relative;
				overflow: hidden;
				width: 100%;
			}
			#content > .list{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				transition: 1s top;
			}
			#content > .list > li{
				position: relative;
				background-position: 50% 50%!important;
				overflow: hidden;
			}
			#content li > section{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				height: 520px;
				width: 1100px;
			}
			/* 第一屏 */
			#content > .list > .home{background: url(img/bg1.jpg) no-repeat;}
			#content > .list > .home .home1{width: 100%;height: 100%;perspective: 1000px;transform-style: preserve-3d;}
			#content > .list > .home .home1 > li{position: absolute;top: 0;right: 0;bottom: 0;left: 0;visibility: hidden;}
			#content > .list > .home .home1 > li:nth-child(1){background: #dc6c5f;}
			#content > .list > .home .home1 > li:nth-child(2){background: #95dc84;}
			#content > .list > .home .home1 > li:nth-child(3){background: #64b9d2;}
			#content > .list > .home .home1 > li:nth-child(4){background: #000000;}
			#content > .list > .home .home1 > li > div{color: white;text-align: center;margin-top: 200px;}
			#content > .list > .home .home1 > li.active{visibility: visible;}
			#content > .list > .home .home2{position: absolute;left: 0;right: 0; bottom: 0;text-align: center;}
			#content > .list > .home .home2 > li{border-radius: 50%;width: 20px;height: 20px;background: rgba(255,255,255,0.5);
			display: inline-block;box-shadow: 0 0 4px rgba(25,25,25,0.8);cursor: pointer;}
			#content > .list > .home .home2 > li.active{background: white;cursor: default;}
			
			/* 从左往右的时候 left进入隐藏 right出来显示 */
			#content > .list > .home .home1 > li.leftHide{visibility: hidden;animation: 1s leftHide 1 linear;}
			#content > .list > .home .home1 > li.rightShow{visibility: visible;animation: 1s rightShow 1 linear;}
			@keyframes leftHide{
				0%{visibility: visible;}
				50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
				100%{transform: translateZ(-200px);}
			}
			@keyframes rightShow{
				0%{visibility: hidden;transform: translateZ(-200px);}
				50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
				100%{}
			}
			
			/* 从右往左的时候 left出来显示 right进入隐藏 */
			#content > .list > .home .home1 > li.leftShow{visibility: visible;animation: 1s leftShow 1 linear;}
			#content > .list > .home .home1 > li.rightHide{visibility: hidden;animation: 1s rightHide 1 linear;}
			@keyframes leftShow{
				0%{visibility: hidden;transform: translateZ(-200px);}
				50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
				100%{}
			}
			@keyframes rightHide{
				0%{visibility: visible;}
				50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
				100%{transform: translateZ(-200px);}
			}
			
			
			
			
			/* 第一屏结束 */
			
			
			
			
			
			
			/* 第二屏 */
			#content > .list > .courses{background: url(img/bg2.jpg) no-repeat;}
			#content > .list > .courses .courses1{margin: 50px;position: relative;z-index: 2;}
			#content > .list > .courses .courses2{width: 400px;margin-left: 50px;position: relative;z-index: 2;}
			#content > .list > .courses .courses3{width: 480px;position: absolute;right: 50px;top: 70px;z-index: 2;}
			#content > .list > .courses .courses3 .line{position: absolute;top: -7px;width: 9px;height: 410px;background: gray;
			background: url(img/plus_row.png) no-repeat;}
			
			#content > .list > .courses .courses3 .line:nth-of-type(1){left: -5px;}
			#content > .list > .courses .courses3 .line:nth-of-type(2){left: 115px;}
			#content > .list > .courses .courses3 .line:nth-of-type(3){left: 235px;}
			#content > .list > .courses .courses3 .line:nth-of-type(4){left: 355px;}
			#content > .list > .courses .courses3 .line:nth-of-type(5){left: 475px;}
			
			#content > .list > .courses .courses3 .item{width: 120px;height: 132px;float: left;position: relative;
			perspective: 500px;transform-style: preserve-3d;}
			#content > .list > .courses .courses3 .item .face,
			#content > .list > .courses .courses3 .item .backface{position: absolute;left: 0;top: 0;width: 100%;height: 100%;
			box-sizing: border-box;padding: 15px;transition: transform 1s;}
			
			#content > .list > .courses .courses3 .item .backface{background-position: 50% 50%!important;}
			#content > .list > .courses .courses3 .item:nth-of-type(1) .backface{background: url(img/apcoa.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(2) .backface{background: url(img/binoli.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(3) .backface{background: url(img/bks.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(4) .backface{background: url(img/gu.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(5) .backface{background: url(img/hlx.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(6) .backface{background: url(img/lbs.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(7) .backface{background: url(img/leonberg.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(8) .backface{background: url(img/pcwelt.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(9) .backface{background: url(img/tata.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(10) .backface{background: url(img/bks.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(11) .backface{background: url(img/bks.png) no-repeat;}
			#content > .list > .courses .courses3 .item:nth-of-type(12) .backface{background: url(img/bks.png) no-repeat;}
			
			#content > .list > .courses .courses3 .item .face{transform: rotateY(180deg);backface-visibility: hidden;
			background: #009ee0;}
			
			#content > .list > .courses .courses3 .item:hover .face{transform: rotateY(360deg);}
			#content > .list > .courses .courses3 .item:hover .backface{transform: rotateY(180deg);}
			/* 第二屏结束 */
			
			
			/* 第三屏 */
			#content > .list > .works{background: url(img/bg4.jpg) no-repeat;}
			#content > .list > .works .works1{margin: 50px 0px 100px 50px;position: relative;z-index: 2;}
			
			#content > .list > .works .works2{margin-left: 50px;position: relative;z-index: 2;}
			#content > .list > .works .works2 > .item{float: left;width: 220px;height: 133px;margin: 0 1px;
			position: relative;overflow: hidden;}
			#content > .list > .works .works2 > .item:last-child{width: 332px;}
			#content > .list > .works .works2 > .item .mask{position: absolute;top: 0;right: 0;bottom: 0;left: 0;
			box-sizing: border-box;padding: 10px;background: #000000;opacity: 0;color: white;transition: 1s opacity;}
			#content > .list > .works .works2 > .item .mask .icon{width: 32px;height: 34px;background: pink;margin: 0 auto;
			margin-top: 10px;background: url(img/zoomico.png) no-repeat;transition: .8s background-position;}
			#content > .list > .works .works2 > .item img{transition: 1s transform;}
			#content > .list > .works .works2 > .item .mask .icon:hover{background-position: 0 -35px;}
			#content > .list > .works .works2 > .item:hover .mask{opacity: .8;}
			#content > .list > .works .works2 > .item:hover img{transform: rotate(30deg) scale(1.5);}
			
			#content > .list > .works .works3{width: 167px;height: 191px;background: url(img/robot.png) no-repeat;
			position: absolute;left: 900px;top: 170px;animation: works3Move 4s linear infinite;z-index: 2;}
			
			@keyframes works3Move{
				0%{transform: translateX(0px) rotateY(0deg);}
				49%{transform: translateX(-490px) rotateY(0deg);}
				50%{transform: translateX(-500px) rotateY(180deg);}
				100%{transform: translateX(0px) rotateY(180deg);}
			}
			/* 第三屏结束 */
			
			
			/* 第四屏 */
			#content > .list > .about{background: url(img/bg3.jpg) no-repeat;overflow: hidden;}
			#content > .list > .about .about1{margin: 50px 0px 100px 50px;}
			#content > .list > .about .about2{margin-left: 50px;width: 400px;}
			#content > .list > .about .about4{width: 357px;height: 998px;position: absolute;
			background: url(./img/greenLine.png) no-repeat;left: 60%;top: -200px;}
			#content > .list > .about .about3 > .item{width: 260px;height: 200px;border: 5px solid rgba(255,255,255,0.5);border-radius: 8px;
			position: absolute;z-index: 2;overflow: hidden;}
			#content > .list > .about .about3 > .item:nth-child(1){left: 750px;top: 50px;}
			#content > .list > .about .about3 > .item:nth-child(2){left: 600px;top: 290px;}
			
			#content > .list > .about .about3 > .item > span,#content > .list > .about .about3 > .item > ul{
				position: absolute;top: 0;right: 0;bottom: 0;left: 0;
			}
			#content > .list > .about .about3 > .item:nth-child(1) > span{background: url(img/about2.jpg) no-repeat;transform: scale(1.5);transition: transform 1s;}
			#content > .list > .about .about3 > .item:nth-child(2) > span{background: url(img/about4.jpg) no-repeat;transform: scale(1.5);transition: transform 1s;}
			
			#content > .list > .about .about3 > .item:hover span{transform: scale(1);}
			
			#content > .list > .about .about3 > .item > ul > li{float: left;position: relative;overflow: hidden;}
			#content > .list > .about .about3 > .item > ul > li > img{position: absolute;transition: left 1s,top 1s;}
			/* 第四屏结束 */
			
			
			
			
			
			
			
			
			/* 第五屏样式 */
			#content > .list > .team{background: url(img/bg5.jpg) no-repeat;}
			#content > .list > .team .team1{width: 400px;margin: 50px;float: left;}
			#content > .list > .team .team2{width: 400px;margin: 50px;float: right;}
			#content > .list > .team .team3{width: 944px;height: 448px;position: absolute;left: 50%;
								margin-left: -472px;top: 250px;}
			#content > .list > .team .team3 ul{position: relative;height: 100%;}					
			#content > .list > .team .team3 ul>li{width: 118px;height: 100%;background: url(img/team.png) no-repeat;
								float: left;transition:1s opacity;}
			#content > .list > .team .team3 ul>li:nth-child(1){background-position:0,0;}
			#content > .list > .team .team3 ul>li:nth-child(2){background-position:-118px,0;}
			#content > .list > .team .team3 ul>li:nth-child(3){background-position:-236px,0;}
			#content > .list > .team .team3 ul>li:nth-child(4){background-position:-354px,0;}
			#content > .list > .team .team3 ul>li:nth-child(5){background-position:-472px,0;}
			#content > .list > .team .team3 ul>li:nth-child(6){background-position:-590px,0;}
			#content > .list > .team .team3 ul>li:nth-child(7){background-position:-708px,0;}
			#content > .list > .team .team3 ul>li:nth-child(8){background-position:-826px,0;}
			#content > .list > .team canvas{position: absolute;top: 100px;}
			/* 第五屏结束 */
			
			/* 小圆点的样式 */
			#content > .dot{position: fixed;right: 20px;top: 50%;}
			#content > .dot > li{width: 10px;height: 10px;border: 5px solid pink;margin-top: 10px;
			border-radius: 50%;}
			#content > .dot > li.active{background: white;}
			/* 小圆点样式结束 */
			/* 内容区样式结束 */
			
			/* 出入场 */
			#content > .list > .home .home1,#content > .list > .home .home2{transition: 1s transform,1s opacity;}
			#content  .courses .plane1{ width:359px; height:283px; background:url(img/plane1.png) no-repeat; position:absolute; left:300px; top:-100px; transition:1s transform;}
			#content  .courses .plane2{ width:309px; height:249px; background:url(img/plane2.png) no-repeat; position:absolute; left:-100px; top:200px; transition:1s transform;}
			#content  .courses .plane3{ width:230px; height:182px; background:url(img/plane3.png) no-repeat; position:absolute; left:300px; top:400px; transition:1s transform;}
			#content  .works .pencel1{ width:180px; height:97px; background:url(img/pencel1.png) no-repeat; position:absolute; transition:1s transform; left:500px; top:0;}
			#content  .works .pencel2{ width:268px; height:38px; background:url(img/pencel2.png) no-repeat; position:absolute; transition:1s transform; left:300px; top:250px;}
			#content  .works .pencel3{ width:441px; height:231px; background:url(img/pencel3.png) no-repeat; position:absolute; transition:1s transform; left:650px; top:300px;}
			#content > .list > .about .about3 > .item,#content > .list > .team .team1,#content > .list > .team .team2
			{transition:1s transform;}
			/* 出入场结束 */
			
			/* 音频 */
			#head > .headMain .music{width: 14px;height: 14px;background: url(img/musicon.gif) no-repeat;
			float: left;margin: 50px 0px 0px 5px;}
			/* 音频结束 */
			
			
			/* 开机动画 */
			#mask{height: 100%;width: 100%;position: absolute;z-index: 100;}
			#mask .up{width: 100%;height: 50%;background: deepskyblue;transition: 1s height;}
			#mask .down{width: 100%;height: 50%;background: deepskyblue;transition: 1s height;
			position: absolute;bottom: 0;}
			#mask .line{height: 4px;width: 0;background: white;
			position: absolute;z-index: 101;left: 0;top: 50%;margin-top: -2px;transition: 1s width;}
			/* 开机动画结束 */
		</style>
	</head>
	<body>
		<section id="wrap">
			<!-- 流体布局 -->
			<div id="mask">
				<div class="up"></div>
				<div class="down"></div>
				<div class="line"></div>
			</div>
			<header id="head">
				<!-- 固定布局 -->
				<div class="headMain">
					<h1 class="logo">
						<img src="img/logo.png">
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:void(0);">
									<div class="up">
										<img src="img/home_gruen.png">
									</div>
									<div class="down">
										<img src="img/home.png">
									</div>
								</a>

							</li>
							<li>
								<a href="javascript:void(0);">
									<div class="up">
										Courses
									</div>
									<div class="down">
										Courses
									</div>
								</a>

							</li>
							<li>
								<a href="javascript:void(0);">
									<div class="up">
										Works
									</div>
									<div class="down">
										Works
									</div>
								</a>

							</li>
							<li>
								<a href="javascript:void(0);">
									<div class="up">
										About
									</div>
									<div class="down">
										About
									</div>
								</a>

							</li>
							<li>
								<a href="javascript:void(0);">
									<div class="up">
										Team
									</div>
									<div class="down">
										Team
									</div>
								</a>

							</li>
						</ul>
					</nav>
					<div class="arrow"></div>
					<div class="music">
						<audio src="img/audio.mp3" loop="loop">
							当前浏览器不支持audio
						</audio>
					</div>
				</div>
			</header>
			<section id="content">
				<ul class="list">
					<li class="home">
						<section>
							<ul class="home1">
								<li class="commonTitle active"><div class="item">one layer</div></li>
								<li class="commonTitle"><div class="item">two layer</div></li>
								<li class="commonTitle"><div class="item">three layer</div></li>
								<li class="commonTitle"><div class="item">four layer</div></li>
							</ul>
							<ul class="home2">
								<li class="active"></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</section>
					</li>
					<li class="courses commonText">
						<section>
							<header class="courses1 commonTitle">
								<span>EINIGE</span> <br/>
								<span>UNSERER</span> <br/>
								<span>KUNDEN</span>  <br/>
							</header>
							<div class="courses2 commonText">
								<p>
								 Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann.	<br/>
								 Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal.
								</p>
							</div>
							<div class="courses3">
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								<div class="item">
									<div class="backface">
										
									</div>
									<div class="face">
										测试文字111111
									</div>
								</div>
								</div>
							</div>
							<div class="plane1"></div>
							<div class="plane2"></div>
							<div class="plane3"></div>
						</section>
					</li>
					<li class="works">
						<section>
							<header class="works1 commonTitle">
								<span>EINBLICK</span> <br/>
								<span>ERKENNTNIS</span> <br/>
								<span>ERGEBNIS</span> <br/>
							</header>
							<div class="works2">
								<div class="item">
									<img src="img/worksimg1.jpg" >
									<div class="mask">
										<span>玲珑骰子安红豆</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg2.jpg" >
									<div class="mask">
										<span>你的嘴巴真的臭</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg3.jpg" >
									<div class="mask">
										<span>听得我是很难受</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg4.jpg" >
									<div class="mask">
										<span>非要锤死你个禽兽</span>
										<div class="icon"></div>
									</div>
								</div>
							</div>
						    <div class="works3"></div>
							<div class="pencel1"></div>
							<div class="pencel2"></div>
							<div class="pencel3"></div>
						</section>
					</li>
					<li class="about">
						<section>
							<header class="about1 commonTitle">
								<span>DIE</span> <br/>
								<span>SPEZIELLE</span> <br/>
								<span>VIELFALT</span> <br/>
							</header>
							<div class="about2">
								<p class="commonText">Der bunte Medienmix ist die Faszination die uns antreibt und das, was man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.</p>
							</div>
							<div class="about3">
								<div class="item">
									<span></span>
									<ul data-src="img/about1.jpg"></ul>
								</div>
								<div class="item">
									<span></span>
									<ul data-src="img/about3.jpg"></ul>
								</div>
							</div>
							<div class="about4"></div>
						</section>
					</li>
					<li class="team">
						<section>
							<header class="team1 commonTitle">
								<span>WIR SIND</span> <br/>
								<span>VOXELA</span>   <br/>
							</header>
							<div class="team2">
								<p class="commonText">Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe.</p>
								<p class="commonText">Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die individuellsten Kundenwünsche schnell und kompetent umzusetzen.</p>
							</div>
							<div class="team3">
								<ul>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
						</section>
					</li>
				</ul>
			<ul class="dot">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var arrowEl = document.querySelector("#head .headMain > .arrow");
			var aliNode = document.querySelectorAll("#head .headMain > .nav > .list li");
			var upNodes = document.querySelectorAll("#head .headMain > .nav > .list .up");
			var liNode = aliNode[0];
			var firstUpNode = liNode.querySelector(".up");
			var contentNode = document.querySelector("#content");
			var headNode = document.querySelector("#head");
			var cLiNodes = document.querySelectorAll("#content>.list>li");
			var cList = document.querySelector("#content .list");
			var home2LiNodes = document.querySelectorAll("#content > .list > .home .home2 > li");
			var home1LiNodes = document.querySelectorAll("#content > .list > .home .home1 > li");
			var home1 = document.querySelector("#content > .list > .home .home1");
			var aboutUls = document.querySelectorAll("#content > .list > .about .about3 > .item > ul");
			var dotLis = document.querySelectorAll("#content > .dot > li");
			var team3 = document.querySelector("#content > .list > .team  .team3");
			var team3Ul = document.querySelector("#content > .list > .team .team3 ul");
			var team3Lis = document.querySelectorAll("#content > .list > .team .team3 ul>li");
			var mask = document.querySelector("#mask");
			var line = document.querySelector("#mask .line");
			var mians = document.querySelectorAll("#mask div");
			var music = document.querySelector("#head > .headMain .music");
			var audio = document.querySelector("#head > .headMain .music audio");
			var now = 0;    //同步当前屏的index的位置，用于缩放时实时更新视口的尺寸
			var timer = 0;
			
			
			//上一屏
			var preIndex = 0;
			
			
			
			//开机动画
			loadingAn();
			function loadingAn(){
				var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','about1.jpg','about2.jpg','about3.jpg','about4.jpg','worksimg1.jpg','worksimg2.jpg','worksimg3.jpg','worksimg4.jpg','team.png','greenLine.png'];
				//模拟请求图片
				var flag = 0;
				for (let i = 0; i < arr.length; i++) {
					var img = new Image();
					img.src = `img/${arr[i]}`;
					img.onload = function(){
						flag++;
						line.style.width = flag/arr.length*100+"%";
					}
				}
				
				line.addEventListener("transitionend",function(){
					if(flag === arr.length){
						for (let i = 0; i < mians.length; i++) {
							mians[i].style.height = 0 + 'px';
						}
						this.style.display = 'none';
					}
				})
				
				mians[0].addEventListener("transitionend",function(){
					mask.remove();
					audio.play();
					anArr[0].inAn();
					home3D();
				})
			}
			
			
			//音频
			music.onclick = function(){
				if(audio.paused){
					audio.play();
					music.style.background = "url(img/musicon.gif)";
				}else{
					audio.pause();
					music.style.background = "url(img/musicoff.gif)";
				}
			}
			
			
			//出入场
			var anArr = [
				{
					inAn:function(){
						var home1 = document.querySelector("#content > .list > .home .home1");
						var home2 = document.querySelector("#content > .list > .home .home2");
						
						home1.style.transform="translateY(0px)";
						home2.style.transform="translateY(0px)";
						home1.style.opacity=1;
						home2.style.opacity=1;
					},
					outAn:function(){
						var home1 = document.querySelector("#content > .list > .home .home1");
						var home2 = document.querySelector("#content > .list > .home .home2");
						
						home1.style.transform="translateY(-400px)";
						home2.style.transform="translateY(100px)";
						home1.style.opacity=0;
						home2.style.opacity=0;
					}
				},
				{
					inAn:function(){
						var plane1 = document.querySelector("#content .courses .plane1");
						var plane2 = document.querySelector("#content .courses .plane2");
						var plane3 = document.querySelector("#content .courses .plane3");
						
						plane1.style.transform = "translate(0px,0px)";
						plane2.style.transform = "translate(0px,0px)";
						plane3.style.transform = "translate(0px,0px)";
					},
					outAn:function(){
						var plane1 = document.querySelector("#content .courses .plane1");
						var plane2 = document.querySelector("#content .courses .plane2");
						var plane3 = document.querySelector("#content .courses .plane3");
						
						plane1.style.transform = "translate(-200px,-200px)";
						plane2.style.transform = "translate(-200px,200px)";
						plane3.style.transform = "translate(200px,-200px)";
						
					}
				},
				{
					inAn:function(){
						var pencel1 = document.querySelector("#content .works .pencel1");
						var pencel2 = document.querySelector("#content .works .pencel2");
						var pencel3 = document.querySelector("#content .works .pencel3");
					
					    pencel1.style.transform = "translateY(0px)";
					    pencel2.style.transform = "translateY(0px)";
					    pencel3.style.transform = "translateY(0px)";
					},
					outAn:function(){
						var pencel1 = document.querySelector("#content .works .pencel1");
						var pencel2 = document.querySelector("#content .works .pencel2");
						var pencel3 = document.querySelector("#content .works .pencel3");
					
					    pencel1.style.transform = "translateY(-100px)";
						pencel2.style.transform = "translateY(100px)";
						pencel3.style.transform = "translateY(100px)";
					}
				},
				{
					inAn:function(){
						var Rect1 = document.querySelector("#content > .list > .about .about3 > .item:nth-child(1)");
						var Rect2 = document.querySelector("#content > .list > .about .about3 > .item:nth-child(2)");
					
					    Rect1.style.transform = "rotate(0deg)";
					    Rect2.style.transform = "rotate(0deg)";
					},
					outAn:function(){
						var Rect1 = document.querySelector("#content > .list > .about .about3 > .item:nth-child(1)");
						var Rect2 = document.querySelector("#content > .list > .about .about3 > .item:nth-child(2)");
					    
						Rect1.style.transform = "rotate(45deg)";
						Rect2.style.transform = "rotate(-45deg)";
					}
				},
				{
					inAn:function(){
						var Rect1 = document.querySelector("#content > .list > .team .team1");
						var Rect2 = document.querySelector("#content > .list > .team .team2");
						
						Rect1.style.transform = "translateX(0px)";
						Rect2.style.transform = "translateX(0px)";
					},
					outAn:function(){
						var Rect1 = document.querySelector("#content > .list > .team .team1");
						var Rect2 = document.querySelector("#content > .list > .team .team2");
						
						Rect1.style.transform = "translateX(-200px)";
						Rect2.style.transform = "translateX(200px)";
					}
				},
			];
			
			for (let i = 0; i < anArr.length; i++) {
				anArr[i]["outAn"]();
			}
			
			// anArr[4].outAn();
			 // setTimeout(function(){
			 // 	anArr[0].inAn();
			 // },2000)
			
			
			
			
			
			
			//第五屏气泡效果
			biubiu();
			function biubiu(){
				var oc =null;
				var time1=0;
				var time2=0;
				for(var i=0;i<team3Lis.length;i++){
					team3Lis[i].onmouseenter=function(){
						for(var i=0;i<team3Lis.length;i++){
							team3Lis[i].style.opacity=.4;
						}
						this.style.opacity=1;
						addCanvas();
						oc.style.left = this.offsetLeft+"px";
					}
				}
				
				function addCanvas(){
					if(!oc){
						oc = document.createElement("canvas");
						oc.width = team3Lis[0].offsetWidth;
						oc.height = team3Lis[0].offsetHeight*2/3;
						
						//oc team3
						/*
						 	当指针设备移动到存在监听器的元素或其子元素的时候，
							mouseover
							mouseout（有冒泡）
								
							mouseenter
							mouseleave（无冒泡）
							事件就会被触发
						*/
						team3.onmouseleave=function(){
							for(var i=0;i<team3Lis.length;i++){
								team3Lis[i].style.opacity=1;
							}
							
							removeCanvas();
						}
						
						
						team3.appendChild(oc);
						QiPao()
					}
				}
				
				
				function QiPao(){
					if(oc.getContext){
						var ctx = oc.getContext("2d");
						var arr=[];
						//将数组中的圆绘制到画布上
						time1=setInterval(function(){
							ctx.clearRect(0,0,oc.width,oc.height);
							//动画
							for(var i=0;i<arr.length;i++){
								arr[i].deg+=10;
								arr[i].x = arr[i].startX +  Math.sin( arr[i].deg*Math.PI/180 )*arr[i].step*2;
								arr[i].y = arr[i].startY - (arr[i].deg*Math.PI/180)*arr[i].step ;
								
								if(arr[i].y <=50){
									arr.splice(i,1)
								}
							}
							//绘制
							for(var i=0;i<arr.length;i++){
								ctx.save();
								ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].alp+")";
								ctx.beginPath();
								ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
								ctx.fill();
								ctx.restore();
							}
						},1000/60)
						
						//往arr中注入随机圆的信息
						time2=setInterval(function(){
							var r =Math.random()*6+2;
							var x = Math.random()*oc.width;
							var y = oc.height - r;
							var red =   Math.round(Math.random()*255);
							var green = Math.round(Math.random()*255);
							var blue =  Math.round(Math.random()*255);
							var alp = 1;
							
							
							var deg =0;
							var startX = x;
							var startY = y;
							//曲线的运动形式
							var step =Math.random()*20+10;
							arr.push({
								x:x,
								y:y,
								r:r,
								red:red,
								green:green,
								blue:blue,
								alp:alp,
								deg:deg,
								startX:startX,
								startY:startY,
								step:step
							})
						},50)
					}
				}
				
				function removeCanvas(){
					oc.remove();
					oc=null;
					clearInterval(time1);
					clearInterval(time2);
				}
			}
			
			
			
			
			
			
			
			
			
			
			//第四屏图片炸裂效果
			picBoom()
			function picBoom(){
				for (let i = 0; i < aboutUls.length; i++) {
						 change(aboutUls[i]);
					}
				
				
				function change(UL){
					var src = UL.dataset.src;
					var w = UL.offsetWidth / 2;
					var h = UL.offsetHeight / 2;
					for (let i = 0; i < 4; i++) {
						var liNode = document.createElement("li");
						liNode.style.height = h + 'px';
						liNode.style.width = w + 'px';
						var imgNode = document.createElement("img");
						
						//1. left:0 top:0
						//2. left:-w top:0
						//3. left:0 top:-h
						//4. left:-w top:-h
						imgNode.style.left = -(i%2)*w +'px';
						imgNode.style.top =-Math.floor((i/2))*h +'px';
						imgNode.src = src;
						
						liNode.appendChild(imgNode);
						UL.appendChild(liNode);
						}
						
						
						UL.onmouseenter = function(){
						//1. left:0 top:h
						//2. left:-2w top:0
						//3. left:w top:-h
						//4. left:-w top:-2h
						var imgNodes = this.querySelectorAll("li > img");
						imgNodes[0].style.top = h + 'px';
						imgNodes[1].style.left = -2*w + 'px';
						imgNodes[2].style.left = w + 'px';
						imgNodes[3].style.top = -2*h + 'px';
						}
						
						UL.onmouseleave = function(){
						var imgNodes = this.querySelectorAll("li > img");
						imgNodes[0].style.top = 0 + 'px';
						imgNodes[1].style.left = -w + 'px';
						imgNodes[2].style.left = 0 + 'px';
						imgNodes[3].style.top = -h + 'px';
						}
				}	
			}
			
			
			
			
			
			
			
			//第一屏3D交互
			var timer3D = 0;
			var oldIndex = 0;
			var autoIndex = 0;
			//变量提升的坑!!!!!
			//home3D();
			function home3D(){
				for (let i = 0; i < home2LiNodes.length; i++) {
					home2LiNodes[i].index = i;
					home2LiNodes[i].onclick = function(){
						clearInterval(timer3D);
						for (let i = 0; i < home2LiNodes.length; i++) {
							home2LiNodes[i].classList.remove("active");
						}
						this.classList.add("active");
						
						//从左往右点 当前索引大于前一个索引 
						if(this.index > oldIndex){
							home1LiNodes[this.index].classList.remove("rightHide");
							home1LiNodes[this.index].classList.remove("leftShow");
							home1LiNodes[this.index].classList.remove("leftHide");
							home1LiNodes[this.index].classList.add("rightShow");
							
							home1LiNodes[oldIndex].classList.remove("rightHide");
							home1LiNodes[oldIndex].classList.remove("leftShow");
							home1LiNodes[oldIndex].classList.remove("rightShow");
							home1LiNodes[oldIndex].classList.add("leftHide");
						}
						
						
						//从右往左点 当前索引小于前一个索引
						if(this.index < oldIndex){
							home1LiNodes[this.index].classList.remove("rightHide");
							home1LiNodes[this.index].classList.remove("leftHide");
							home1LiNodes[this.index].classList.remove("rightShow");
							home1LiNodes[this.index].classList.add("leftShow");
							
							home1LiNodes[oldIndex].classList.remove("rightShow");
							home1LiNodes[oldIndex].classList.remove("leftShow");
							home1LiNodes[oldIndex].classList.remove("leftHide");
							home1LiNodes[oldIndex].classList.add("rightHide");
						}
						
						oldIndex = this.index;
						//手动轮播同步自动轮播!!!!!
						//手动点完是需要自动轮播的，自动轮播从哪个面开始播？--->手动点的那个面开始播
						//手动轮播的逻辑必须要告诉自动轮播我刚刚点击了哪一个面
						autoIndex = this.index;
						
						//重新开启
						//move();
					}
				}
				
		
				//从左向右自动轮播
				move();
				function move(){
					clearInterval(timer3D);
					timer3D = setInterval(function(){
						autoIndex++;
						
						//无缝
						if(autoIndex == home1LiNodes.length){
							autoIndex = 0;
						}
						
						//小圆点同步
						for (let i = 0; i < home2LiNodes.length; i++) {
							home2LiNodes[i].classList.remove("active");
						}
						home2LiNodes[autoIndex].classList.add("active");
						
						//自动
						home1LiNodes[autoIndex].classList.remove("rightHide");
						home1LiNodes[autoIndex].classList.remove("leftShow");
						home1LiNodes[autoIndex].classList.remove("leftHide");
						home1LiNodes[autoIndex].classList.add("rightShow");
						
						home1LiNodes[oldIndex].classList.remove("rightHide");
						home1LiNodes[oldIndex].classList.remove("leftShow");
						home1LiNodes[oldIndex].classList.remove("rightShow");
						home1LiNodes[oldIndex].classList.add("leftHide");
						
						//自动轮播去同步手动轮播 !!!!!
						//自动轮播一直在运行 autoIndex一直++，自动轮播到一半时间时有可能触发手动轮播
						//这个时候自动轮播的逻辑必须要告诉手动轮播，我播到哪一个面上了
						oldIndex = autoIndex;
					},3000)
				}
				
				home1.onmouseenter = function(){
					clearInterval(timer3D);
				}
				home1.onmouseleave = function(){
					move();
				}
				
			}
			
			
			
			
			
			
			
			//内容区交互
			//屏幕缩放的时候应该重新获取视口高度
			//使得缩放时始终只看见单页面
			window.onresize = function(){
				/*
				调整分辨率的时候应该注意的问题
					1.没有点击的时候视口只能出现一屏
					2.点击后视口只能出现一屏，在1的基础上对每一屏的偏移量进行重新调整
					3.小箭头的位置也需要同步
				*/
				contentBind();
				cList.style.top = -now*(document.documentElement.clientHeight - headNode.offsetHeight) + 'px';
				arrowEl.style.left = aliNode[now].offsetLeft + aliNode[now].offsetWidth/2 - arrowEl.offsetWidth/2 + 'px';
			}
			
			//添加鼠标滚轮控制
			if(contentNode.addEventListener){
				contentNode.addEventListener("DOMMouseScroll",function(ev){
					ev = ev || event;
					
					//让fn的逻辑在事件被频繁触发的时候只被执行一次
					clearTimeout(timer);
					timer = setTimeout(function(){
						fn(ev);
					},200)
				});
			}
			contentNode.onmousewheel = function(ev){
				ev = ev || event;
				clearTimeout(timer);
				timer = setTimeout(function(){
					fn(ev);
				},200)
			}
			function fn(ev){
				ev = ev || event;
				var dir = "";
				if(ev.wheelDelta){
					dir = ev.wheelDelta>0?"up":"down";
				}else if(ev.detail){
					dir = ev.detail<0?"up":"down";
				}
				preIndex = now;
				switch (dir){
					case "up":
					    if(now > 0 ){
							now--;
							move(now);
						}
						break;
					case "down":
						if(now < cLiNodes.length - 1){
							now++;
							move(now);
						}
						break;
				}
			}
			
			contentBind();
			function contentBind(){
				//内容区的高度 = 视口的高度 - 头部的高度
				contentNode.style.height = document.documentElement.clientHeight - headNode.offsetHeight + 'px';
				for(let i = 0; i < cLiNodes.length; i++){
					//li的高度应该与内容区的高度一致
					cLiNodes[i].style.height = document.documentElement.clientHeight - headNode.offsetHeight + 'px';
				}
			}
			
			
			
			
			//头部交互
			headBind();
			function headBind(){
				arrowEl.style.left = liNode.offsetLeft + liNode.offsetWidth/2 - arrowEl.offsetWidth/2 + 'px';
				firstUpNode.style.width = "100%";
				for(let i = 0; i < aliNode.length; i++){
					//转绑
					aliNode[i].index = i;
					aliNode[i].onclick = function(){
						preIndex = now;
						move(this.index);
						now = this.index;
					}
				}
				for(let i = 0; i < dotLis.length; i++){
					//转绑
					dotLis[i].index = i;
					dotLis[i].onclick = function(){
						preIndex = now;
						move(this.index);
						now = this.index;
					}
				}
			}
			//move(4);
			function move(index){
			//导航
			for(let i = 0; i < upNodes.length; i++){
				upNodes[i].style.width = "";
			}
			upNodes[index].style.width = "100%";
			//箭头
			arrowEl.style.left = aliNode[index].offsetLeft + aliNode[index].offsetWidth/2 - arrowEl.offsetWidth/2 + 'px';
			//屏幕切换
			cList.style.top = -index*(document.documentElement.clientHeight - headNode.offsetHeight) + 'px';
			//小圆点
			for(let i = 0; i < dotLis.length; i++){
				dotLis[i].className = "";
			}
			dotLis[index].className = "active";
			
			
			//出入场
			if(anArr[index]&&typeof anArr[index]["inAn"] === "function"){
				anArr[index]["inAn"]();
			}
			if(anArr[preIndex]&&typeof anArr[preIndex]["outAn"] === "function"){
				anArr[preIndex]["outAn"]();
			}
			
			}
			
		}
	</script>
</html>
